<template>
  <div id="shop-item" v-if="itemInfo.state==checkStatus">
    <div class="item-img">
      <img :src="itemInfo.img" alt="商品图片"></div>
    <div class="item-info">
      <div class="item-title">{{itemInfo.goodName}}</div>
        <div class="info-center">
          <div class="address">地址：{{itemInfo.address}}</div>
          <div class="user">收件人：{{itemInfo.userName}}</div>
          <div class="tel">电话：{{itemInfo.tel}}</div>
        </div>
        <div class="info-bottom">
          <div class="item-price left">${{itemInfo.price}}</div>
          <div class="item-count right">x{{itemInfo.num}}</div>
        </div>
    </div>
    <div @click="deleteGood" v-if="itemInfo.state==1"><slot name="button"></slot></div>
  </div>
</template>

<script>
  import checkButton from 'components/common/checkButton/button.vue'
  import {handleOrder} from 'network/order/order.js'
  export default{
    name:'',
    data(){
      return {
        checkStatus:1
      }
    },
    computed:{

    },
    methods:{
      deleteGood(){
        let userId=JSON.parse(window.sessionStorage.user).id
        let orderId=this.itemInfo.id
        console.log(orderId);
        handleOrder(orderId).then(res=>{
          console.log(res);
          if(res.data.result=="yes"){
            this.$emit("deleteOrder",orderId)
          }
        }).catch(e=>{
          console.log(e);
        })
      }
    },
    components:{
      checkButton
    },
    props:{
      itemInfo:{
        type:Object,
        default(){
          return {}
        }
      }
    },
    mounted() {
      this.$bus.$on("changeOrderStatus",()=>{
        console.log('get');
        if(this.checkStatus==1)
          this.checkStatus=0
        else if(this.checkStatus==0)
          this.checkStatus=1
      })
    }
  }
</script>

<style scoped>
  .button{
    background-color: #e990ff;
    color: white;
    border-radius: 10%;
    height: 30px;
    width: 70px;
    position: absolute;
    bottom: 25px;
    right: 10px;
    box-shadow: 0px 0px 1px 0px rgba(118, 118, 118, 0.4);
    font-size: 20px;
  }

  #shop-item {
    width: 100%;
    display: flex;
    font-size: 0;
    padding: 5px;
    border-bottom: 1px solid #ccc;
    position: relative;

  }

  .item-selector {
    width: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .item-title, .item-desc {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .item-img {
    /* padding: 5px; */
  /*border:1px solid #ccc; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  }
  .item-img img {

    height: 160px;
    display: block;
    border-radius: 5px;
  }

  .item-info {
    font-size: 17px;
    color:#333;
    padding: 5px 10px;
    position: relative;
    overflow: hidden;
  }
  .info-center{
    margin-top: 25px;
  }
  .item-info .item-desc {
    font-size: 14px;
    color:#666;
    margin-top: 15px;
  }
  .info-bottom {
    margin-top: 35px;
    position: relative;
    bottom: 10px;
  }
  .info-bottom .item-price {
    color: orangered;
  }
</style>
